<!DOCTYPE html>
<!--conf
<sample>
              <product version="4.0b1" edition="std"/>
                     <modifications>
                            <modified date="130911"/>
                     </modifications>
               </sample>
-->
<html>
<head>
	<title>Move option between selects</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
				{type: "settings", position: "label-top", labelWidth: 160, inputWidth: 160, labelHeight: 20},
				{type: "multiselect", label: "All Contacts", name: "c_all", size: 8, options:[
					{value: "1", text: "Fernando Novick"},
					{value: "2", text: "Ted Spengler"},
					{value: "3", text: "Lilia Horace"},
					{value: "4", text: "Cody Derksen"},
					{value: "5", text: "Mathew Musso"},
					{value: "6", text: "Nelson Brayboy"}
				]},
				{type: "newcolumn"},
				{type: "block", list:[
					{type: "button", name: "add", value: ">>", offsetLeft: 25, offsetTop: 60},
					{type: "button", name: "remove", value: "<<", offsetLeft: 25}
				]},
				{type: "newcolumn"},
				{type: "multiselect", label: "Blocked Contacts", name: "c_blocked", size: 8, options:[
					{value: "7", text: "Harriett Wickwire"},
					{value: "8", text: "Fernando Frerichs"},
					{value: "9", text: "Erik Couey"}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.attachEvent("onButtonClick",function(name){
				if (name == "add" || name == "remove") {
					changeContactState(name=="add");
				};
			});
		}
		
		function changeContactState(block) {
			
			var ida = (block?"c_all":"c_blocked");
			var idb = (block?"c_blocked":"c_all");
			
			var sa = myForm.getSelect(ida);
			var sb = myForm.getSelect(idb);
			
			var t = myForm.getItemValue(ida);
			if (t.length == 0) return;
			eval("var k={"+t.join(":true,")+":true};");
			
			var w = 0;
			var ind = -1;
			while (w < sa.options.length) {
				if (k[sa.options[w].value]) {
					sb.options.add(new Option(sa.options[w].text,sa.options[w].value));
					sa.options.remove(w);
					ind = w;
				} else {
					w++;
				}
			}
			
			if (sa.options.length > 0 && ind >= 0) {
				if (sa.options.length > 0) sa.options[t.length>1?0:Math.min(ind,sa.options.length-1)].selected = true;
			}
			
		}
		
	</script>
</head>
<body onload="doOnLoad();">
	<div id="myForm" style="height:800px;"></div>
</body>
</html>
